<template>
    <div id="app">
        <h1>{{title}}</h1>
        <!--查询条件表单-->
        <el-form :inline="true" :model="vo" class="demo-form-inline">
            <el-form-item label="景点编号">
                <el-input v-model="vo.searchId" placeholder="请输入景点编号"></el-input>
            </el-form-item>
            <el-form-item label="景点名称">
                <el-input v-model="vo.searchName" placeholder="请输入景点名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="info" @click="addDialogFormVisible = true">添加</el-button>
            </el-form-item>
        </el-form>

        <!--查询列表的表格-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180"n
                    prop="id"
            >
            </el-table-column>
            <el-table-column
                    label="景点名称"
                    width="250"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="所在地址"
                    width="250"
                    prop="address">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页工具栏-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="sizeList"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--添加对话框-->
        <el-dialog title="新增景点" :visible.sync="addDialogFormVisible">
            <el-form :model="addForm">
                <el-form-item label="景点名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在地址" :label-width="formLabelWidth">
                    <el-select v-model="addForm.address" placeholder="请选择地址">
                        <el-option label="长沙" value="长沙"></el-option>
                        <el-option label="湘潭" value="湘潭"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="景点描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="addForm.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>


        <!--编辑对话框-->
        <el-dialog title="修改景点" :visible.sync="editDialogFormVisible">
            <el-form :model="editForm">
                <el-form-item label="景点名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在地址" :label-width="formLabelWidth">
                    <el-select v-model="editForm.address" placeholder="请选择地址">
                        <el-option label="长沙" value="长沙"></el-option>
                        <el-option label="湘潭" value="湘潭"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="景点描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="editForm.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            title: '景点列表',
            // 表格数据
            tableData: [],
            // 查询条件vo对象
            vo: {},
            // 默认当前页号
            current: 1,
            // 默认页大小
            size: 2,
            // 页大小列表
            sizeList:[2, 5, 10, 50],
            // 总记录数
            total: 0,
            // 添加对话框是否显示
            addDialogFormVisible: false,
            // 添加表单
            addForm: {},
            // 添加表单lable的宽度
            formLabelWidth: '120px',
            // 编辑对话框是否显示
            editDialogFormVisible: false,
            // 编辑表单
            editForm: {}
        }
    },
    methods: {
        // 修改后的保存
        edit() {
            // 隐藏编辑对话框
            this.editDialogFormVisible = false
            // 发送异步请求修改
            this.$axios.put(`spot`,this.editForm).then(r=>{
                if(r.data == "yes") {
                    alert('成功')
                    this.search()
                }
                else
                    alert('失败')
            })
        },
        // 新增
        add() {
            this.addDialogFormVisible = false
            // 发送异步请求进行添加
            this.$axios.post(`spot`,this.addForm).then(r => {
                if(r.data == "yes") {
                    alert('成功')
                    this.search()
                }
                else
                    alert('失败')
            })
        },
        // 查询
        search() {
            // 发送异步请求进行分页查询
            this.$axios.post(`spot/page/${this.current}/${this.size}`, this.vo).then(r => {
                this.tableData = r.data.list
                this.total = r.data.total
            })
        },
        // 页大小改变
        handleSizeChange(val) {
            this.size = val
            this.search()
        },
        // 页号改变
        handleCurrentChange(val) {
            this.current = val
            this.search()
        },
        // 编辑链接
        handleEdit(index, row) {
            // 显示编辑对话框
            this.editDialogFormVisible = true
            // 景点id
            let id = row.id
            // 发送异步请求进行查询
            this.$axios.get(`spot/${id}`).then(r=>{
                this.editForm = r.data
            })
        },
        // 删除链接
        handleDelete(index, row) {
            let flag = confirm('确认要删除本条数据吗？')
            if(flag) {
                // 获取要删除的id
                let id = row.id
                // 发送异步请求进行删除
                this.$axios.delete(`spot/${id}`).then(r=>{
                    if(r.data == "yes") {
                        alert('成功')
                        this.search()
                    }
                    else
                        alert('失败')
                })
            }
        }
    },
    // 生命周期的钩子函数
    created() {
        this.search()
    }
}
</script>

<style>
#app {
    /*font-family: Avenir, Helvetica, Arial, sans-serif;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
    /*text-align: center;*/
    /*color: #2c3e50;*/
    /*margin-top: 60px;*/
}
</style>
